<template>
  <div class="comment-section">
    <!-- 主评论输入框 - 只在不处于回复状态时显示 -->
    <div v-if="!replyingTo" class="comment-input-area">
      <el-avatar :src="userInfo?.pic" :size="40"></el-avatar>
      <div class="input-wrapper">
        <el-input
          v-model="inputText"
          type="textarea"
          :rows="2"
          placeholder="发一条友善的评论"
          resize="none"
          @focus="handleFocus"
        />
        <div class="input-actions" v-show="isInputFocused">
          <el-button @click="cancelInput">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            发布评论
          </el-button>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="comment-list" ref="commentListRef">
      <div class="comment-header">
        <span class="comment-count">{{ total }}条评论</span>
        <el-dropdown @command="handleSortChange">
          <span class="sort-text">
            {{ currentSort === 'time' ? '按时间排序' : '按热度排序' }}
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="time">按时间排序</el-dropdown-item>
              <el-dropdown-item command="hot">按热度排序</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 评论项 -->
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <el-avatar :src="comment.userAvatar" :size="40"></el-avatar>
        <div class="comment-content">
          <!-- 评论基本信息 -->
          <div class="comment-info">
            <span class="username">{{ comment.username }}</span>
            <span class="time">{{ formatTime(comment.createdAt) }}</span>
          </div>
          <div class="comment-text">{{ comment.content }}</div>
          
          <!-- 评论操作按钮 -->
          <div class="comment-actions">
            <div class="action-item" @click="toggleLike(comment)">
              <el-icon :class="{ 'is-liked': comment.isLiked }">
                <CaretTop />
              </el-icon>
              <span>{{ comment.likes || 0 }}</span>
            </div>
            <div class="action-item" @click="replyTo(comment)">
              <el-icon><ChatDotRound /></el-icon>
              <span>回复</span>
            </div>
            <div v-if="canDelete(comment)" class="action-item delete" @click="deleteComment(comment)">
              <el-icon><Delete /></el-icon>
              <span>删除</span>
            </div>
          </div>

          <!-- 回复输入框 - 只在回复状态时显示 -->
          <div v-if="replyingTo?.comment.id === comment.id && !replyingTo?.reply" class="reply-input-area">
            <el-avatar :src="userInfo?.pic" :size="32"></el-avatar>
            <div class="input-wrapper">
              <el-input
                v-model="replyText"
                type="textarea"
                :rows="2"
                :placeholder="`回复 @${comment.username}：`"
                resize="none"
              />
              <div class="input-actions">
                <el-button @click="cancelReply">取消</el-button>
                <el-button type="primary" @click="submitReply" :loading="submitting">
                  发布回复
                </el-button>
              </div>
            </div>
          </div>

          <!-- 回复列表 -->
          <div v-if="comment.replies && comment.replies.length > 0" class="replies">
            <!-- 展开/按钮 -->
            <div class="expand-replies" @click="toggleReplies(comment)">
              <span v-if="!comment.showReplies">
                展开 {{ comment.replies.length }} 条回复 
                <el-icon><ArrowDown /></el-icon>
              </span>
              <span v-else>
                收起回复
                <el-icon><ArrowUp /></el-icon>
              </span>
            </div>

            <!-- 回复列表 - 只在展开时显示 -->
            <div v-show="comment.showReplies">
              <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                <el-avatar :src="reply.userAvatar" :size="32"></el-avatar>
                <div class="reply-content">
                  <!-- 回复基本信息 -->
                  <div class="reply-info">
                    <span class="username">{{ reply.username }}</span>
                    <span class="time">{{ formatTime(reply.createdAt) }}</span>
                  </div>
                  <div class="reply-text">
                    <template v-if="reply.replyUsername">
                      回复 <span class="reply-to">@{{ reply.replyUsername }}</span>：
                    </template>
                    {{ reply.content }}
                  </div>
                  
                  <!-- 回复操作按钮 -->
                  <div class="reply-actions">
                    <div class="action-item" @click="toggleLike(reply)">
                      <el-icon :class="{ 'is-liked': reply.isLiked }">
                        <CaretTop />
                      </el-icon>
                      <span>{{ reply.likes || 0 }}</span>
                    </div>
                    <div class="action-item" @click="replyTo(comment, reply)">
                      <el-icon><ChatDotRound /></el-icon>
                      <span>回复</span>
                    </div>
                    <div v-if="canDelete(reply)" class="action-item delete" @click="deleteReply(reply)">
                      <el-icon><Delete /></el-icon>
                      <span>删除</span>
                    </div>
                  </div>

                  <!-- 回复的回复输入框 -->
                  <div v-if="replyingTo?.comment.id === comment.id && replyingTo?.reply?.id === reply.id" class="reply-input-area">
                    <el-avatar :src="userInfo?.pic" :size="32"></el-avatar>
                    <div class="input-wrapper">
                      <el-input
                        v-model="replyText"
                        type="textarea"
                        :rows="2"
                        :placeholder="`回复 @${reply.username}：`"
                        resize="none"
                      />
                      <div class="input-actions">
                        <el-button @click="cancelReply">取消</el-button>
                        <el-button type="primary" @click="submitReply" :loading="submitting">
                          发布回复
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div v-if="hasMore" class="load-more" @click="loadMore">
        <span v-if="!loading">加载更多评论</span>
        <el-icon v-else class="loading"><Loading /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown, CaretTop, ChatDotRound, Delete, Loading, ArrowUp } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

// 导入评论 API
import { commentApi } from '@/api/comment'

// 导入WebSocket客户端
import wsClient from '@/utils/websocket'

const props = defineProps({
  videoId: {
    type: [String, Number],
    required: true
  }
})

const router = useRouter()
const inputText = ref('')
const isInputFocused = ref(false)
const submitting = ref(false)
const currentSort = ref('time')
const comments = ref([])
const total = ref(0)
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const hasMore = ref(true)

// 修改用户信息获取方式
const userInfo = computed(() => {
  try {
    const userStr = localStorage.getItem('user')
    if (!userStr) {
      return null
    }
    const user = JSON.parse(userStr)
    // 确保用户对象包含必要的字段
    if (!user || !user.id) {
      console.warn('用户信息不完整:', user)
      return null
    }
    return user
  } catch (error) {
    console.error('解析用户信息失败:', error)
    return null
  }
})

// 处理评论框聚焦
const handleFocus = () => {
  if (!userInfo.value) {
    router.push('/login')
    return
  }
  isInputFocused.value = true
  // 如果正在回复，取消回复状态
  replyingTo.value = null
}

// 取消输入
const cancelInput = () => {
  inputText.value = ''
  isInputFocused.value = false
  replyingTo.value = null
}

// 修改评论提交方法
const handleSubmit = async () => {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入内容')
    return
  }

  // 检查用户是否登录
  if (!userInfo.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  // 再次确认用户ID存在
  if (!userInfo.value.id) {
    ElMessage.error('用户信息不完整，请重新登录')
    router.push('/login')
    return
  }

  submitting.value = true
  try {
    const commentData = {
      videoId: parseInt(props.videoId),
      content: inputText.value.trim(),
      userId: userInfo.value.id,
      parentId: null,
      status: 1,
      // 添加用户信息，用于前端显示
      userAvatar: userInfo.value.pic || '',
      username: userInfo.value.username || '未知用户'
    }

    console.log('发送评论数据:', commentData)

    const res = await commentApi.addComment(commentData)
    console.log('评论响应:', res)

    if (res.code === 1) {
      // 生成一个临时ID
      const tempId = Date.now() + Math.floor(Math.random() * 1000)
      
      // 直接将新评论添加到列表中
      const newComment = {
        id: tempId, // 使用临时ID
        ...commentData,
        createdAt: new Date().getTime(),
        isLiked: false,
        likes: 0,
        replies: [],
        showReplies: false,
        totalReplies: 0
      }
      
      comments.value.unshift(newComment)
      total.value++
      
      inputText.value = ''
      isInputFocused.value = false
      ElMessage.success('评论成功')

      // 等待WebSocket推送真实的评论数据
      // WebSocket收到新评论后会自动更新评论列表
    } else {
      ElMessage.error(res.msg || '评论失败')
    }
  } catch (error) {
    console.error('评论失败:', error)
    ElMessage.error('评论失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 修改回复提交方法
const submitReply = async () => {
  if (!replyText.value.trim()) {
    ElMessage.warning('请输入回复内容')
    return
  }

  // 检查用户是否登录
  if (!userInfo.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  submitting.value = true
  try {
    const replyData = {
      videoId: parseInt(props.videoId),
      content: replyText.value.trim(),
      userId: userInfo.value.id,
      parentId: replyingTo.value.comment.id,
      replyUserId: replyingTo.value.reply?.userId || replyingTo.value.comment.userId,
      status: 1,
      // 添加用户信息，用于前端显示
      userAvatar: userInfo.value.pic,
      username: userInfo.value.username,
      replyUsername: replyingTo.value.reply?.username || replyingTo.value.comment.username
    }

    console.log('发送回复数据:', replyData)

    const res = await commentApi.addComment(replyData)
    console.log('回复响应:', res)

    if (res.code === 1) {
      // 直接将新回复添加到对应评论的回复列表中
      const parentComment = comments.value.find(c => c.id === replyingTo.value.comment.id)
      if (parentComment) {
        const newReply = {
          id: res.data.id, // 使用服务器返回的ID
          ...replyData,
          createdAt: new Date().getTime(),
          isLiked: false,
          likes: 0
        }
        
        if (!parentComment.replies) {
          parentComment.replies = []
        }
        parentComment.replies.unshift(newReply)
        parentComment.totalReplies++
        parentComment.showReplies = true
      }
      
      // 清空输入框和回复状态
      replyText.value = ''
      replyingTo.value = null
      ElMessage.success('回复成功')
    } else {
      ElMessage.error(res.msg || '回复失败')
    }
  } catch (error) {
    console.error('回复失败:', error)
    ElMessage.error('回复失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 修改回复评论的方法
const replyTo = (comment, reply = null) => {
  if (!userInfo.value) {
    router.push('/login')
    return
  }
  replyingTo.value = { comment, reply }
  // 不需要聚焦到主输入框
  replyText.value = '' // 清空回复文本
}

// 删除原来的 submitComment、submitReply、cancelComment、cancelReply 方法

// 处理排序方式改变
const handleSortChange = (command) => {
  currentSort.value = command
  comments.value = []
  currentPage.value = 1
  hasMore.value = true
  fetchComments()
}

// 获取评论列表
const fetchComments = async () => {
  if (loading.value) return
  
  loading.value = true
  try {
    // 构造查询参数
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      videoId: props.videoId,
      parentId: null  // 获取一级评论
    }
    
    console.log('请求参:', params)
    const res = await commentApi.getComments(params)
    console.log('评论列表响应:', res)
    
    if (res.code === 1) {
      const { records, total: totalCount } = res.data
      console.log('评论数据:', records)
      console.log('评论总数:', totalCount)
      
      // 为每个评论添加 showReplies 属性，默认为 false（折叠状态）
      const processedRecords = records.map(comment => ({
        ...comment,
        showReplies: false
      }))
      
      comments.value = [...comments.value, ...processedRecords]
      total.value = totalCount
      hasMore.value = comments.value.length < totalCount
    }
  } catch (error) {
    console.error('获取评论失败:', error)
    ElMessage.error('获取评论失败')
  } finally {
    loading.value = false
  }
}

// 加载更多评论
const loadMore = () => {
  if (!hasMore.value || loading.value) return
  currentPage.value++
  fetchComments()
}

// 点赞/取消点赞
const toggleLike = async (comment) => {
  if (!userInfo.value) {
    router.push('/login')
    return
  }

  try {
    // TODO: 调用点赞接口
    comment.isLiked = !comment.isLiked
    comment.likes += comment.isLiked ? 1 : -1
  } catch (error) {
    ElMessage.error('操作失败，请重试')
  }
}

// 添加回复相关的状态
const replyingTo = ref(null)  // 当前正在回复的评论
const replyText = ref('')     // 回复内容

// 取消回复
const cancelReply = () => {
  replyingTo.value = null
  replyText.value = ''
}

// 判断是否可以删除评论
const canDelete = (comment) => {
  return userInfo.value && (
    userInfo.value.id === comment.userId || 
    userInfo.value.roleId === 1  // 假设 roleId 1 是管理员
  )
}

// 删除评论
const deleteComment = async (comment) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除���条评论吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );

    const res = await commentApi.deleteComment(comment.id);
    if (res.code === 1) {
      ElMessage.success('删除成功');
      // 从列表中移除评论
      comments.value = comments.value.filter(c => c.id !== comment.id);
      total.value--;
    } else {
      ElMessage.error(res.msg || '删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败，请重试');
    }
  }
}

// 删除回复
const deleteReply = async (reply) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条回复吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );

    const res = await commentApi.deleteComment(reply.id);
    if (res.code === 1) {
      ElMessage.success('删除成功');
      // 找到父评论
      const parentComment = comments.value.find(c => c.id === reply.parentId);
      if (parentComment) {
        // 从回复列表中移除
        parentComment.replies = parentComment.replies.filter(r => r.id !== reply.id);
        parentComment.totalReplies--;
      }
    } else {
      ElMessage.error(res.msg || '删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败，请重试');
    }
  }
}

// 获取评论的回复列表
const loadMoreReplies = async (comment) => {
  try {
    const params = {
      page: 1,
      pageSize: 5,  // 每次载5条回复
      videoId: props.videoId,
      parentId: comment.id
    }
    
    const res = await commentApi.getReplies(comment.id, params)
    if (res.code === 1) {
      const { records } = res.data
      // 将新的回复添加到评论的回复列表中
      if (!comment.replies) {
        comment.replies = []
      }
      comment.replies.push(...records)
    }
  } catch (error) {
    ElMessage.error('加载回复失败')
  }
}

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  
  const now = new Date()
  const date = new Date(timestamp)
  const diff = now - date
  
  const minutes = Math.floor(diff / 1000 / 60)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)
  
  if (minutes < 1) return '刚刚'
  if (hours < 1) return `${minutes}分钟前`
  if (days < 1) return `${hours}小时前`
  if (days < 30) return `${days}天前`
  
  return date.toLocaleDateString()
}

// 添加滚动加载相关的逻辑
const commentListRef = ref(null)  // 添加评论列表的引用

// 修改滚动监听相关的逻辑
const handleScroll = () => {
  if (!commentListRef.value) return
  
  const element = commentListRef.value
  // 当滚动到距离底部100px时加载更多
  if (element.scrollHeight - element.scrollTop - element.clientHeight <= 100) {
    loadMore()
  }
}

// 在生命周期钩子中添加和移除滚动监听
onMounted(() => {
  const videoId = parseInt(props.videoId);
  if (!isNaN(videoId)) {
    // 获取评论列表
    fetchComments();
    
    // 连接WebSocket并添加评论处理器
    wsClient.connectToVideo(videoId);
    wsClient.addCommentHandler(handleNewComment);
    
    // 添加滚动监听
    commentListRef.value?.addEventListener('scroll', handleScroll);
  } else {
    console.error('无效的视频ID:', props.videoId);
  }
});

onUnmounted(() => {
  // 移除WebSocket评论处理器
  wsClient.removeCommentHandler(handleNewComment);
  // 关闭WebSocket连接
  wsClient.close();
  // 移除滚动监听
  commentListRef.value?.removeEventListener('scroll', handleScroll);
});

// 修改处理新评论的方法
const handleNewComment = (comment) => {
  console.log('收到新评论数据:', comment);
  
  // 确保评论数据有效
  if (!comment || !comment.content) {
    console.warn('收到无效的评论数据');
    return;
  }
  
  // 如果是当前视频的评论
  if (parseInt(comment.videoId) === parseInt(props.videoId)) {
    // 如果是回复
    if (comment.parentId) {
      const parentComment = comments.value.find(c => c.id === comment.parentId);
      if (parentComment) {
        if (!parentComment.replies) {
          parentComment.replies = [];
        }
        // 检查是否已经存在这条回复
        const existingReply = parentComment.replies.find(r => 
          r.content === comment.content && 
          r.userId === comment.userId &&
          Math.abs(new Date(r.createdAt).getTime() - new Date().getTime()) < 5000
        );
        
        if (!existingReply) {
          const replyData = {
            id: comment.id || Date.now(), // 如果没有ID则使用时间戳
            videoId: comment.videoId,
            userId: comment.userId,
            content: comment.content,
            parentId: comment.parentId,
            replyUserId: comment.replyUserId,
            userAvatar: comment.userAvatar,
            username: comment.username,
            createdAt: comment.createdAt || new Date().toISOString(),
            isLiked: false,
            likes: comment.likesCount || 0,
            replyUsername: comment.replyUsername
          };
          
          console.log('添加新回复:', replyData);
          parentComment.replies.unshift(replyData);
          parentComment.totalReplies = (parentComment.totalReplies || 0) + 1;
          parentComment.showReplies = true;
        }
      }
    } else {
      // 检查是否是自己刚发的评论
      const existingComment = comments.value.find(c => 
        c.content === comment.content && 
        c.userId === comment.userId &&
        Math.abs(new Date(c.createdAt).getTime() - new Date().getTime()) < 5000
      );

      if (!existingComment) {
        const commentData = {
          id: comment.id || Date.now(),
          videoId: comment.videoId,
          userId: comment.userId,
          content: comment.content,
          userAvatar: comment.userAvatar,
          username: comment.username,
          createdAt: comment.createdAt || new Date().toISOString(),
          isLiked: false,
          likes: comment.likesCount || 0,
          replies: [],
          showReplies: false,
          totalReplies: comment.totalReplies || 0
        };
        
        console.log('添加新评论:', commentData);
        comments.value.unshift(commentData);
        total.value++;
      }
    }
  }
};

// 处理评论点赞
const handleCommentLike = (data) => {
  const comment = comments.value.find(c => c.id === data.commentId)
  if (comment) {
    comment.likesCount = data.likesCount
    comment.isLiked = data.isLiked
  }
}

// 处理新回复
const handleNewReply = (reply) => {
  const comment = comments.value.find(c => c.id === reply.parentId)
  if (comment) {
    if (!comment.replies) {
      comment.replies = []
    }
    comment.replies.unshift(reply)
    comment.totalReplies++
  }
}

// 添加展开/折叠回复的方法
const toggleReplies = (comment) => {
  comment.showReplies = !comment.showReplies
}
</script>

<style scoped>
.comment-section {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.comment-input-area {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.input-wrapper {
  flex: 1;
}

.input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.comment-count {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.sort-text {
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-info {
  margin-bottom: 4px;
}

.username {
  font-weight: 500;
  color: var(--text-primary);
  margin-right: 8px;
}

.time {
  font-size: 12px;
  color: var(--text-secondary);
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 6px;
  word-break: break-all;
}

.comment-actions {
  display: flex;
  gap: 12px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.action-item:hover {
  color: #00a1d6;
}

.action-item.delete:hover {
  color: #ff4d4f;
}

.is-liked {
  color: #00a1d6;
}

.replies {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
}

.reply-item {
  display: flex;
  gap: 8px;
  padding: 6px 0;
}

.reply-content {
  flex: 1;
  min-width: 0;
}

.reply-info {
  margin-bottom: 4px;
}

.reply-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.reply-to {
  color: #00a1d6;
  cursor: pointer;
}

.reply-actions {
  display: flex;
  gap: 12px;
}

.view-more {
  margin-top: 8px;
  font-size: 13px;
  color: #00a1d6;
  cursor: pointer;
  text-align: center;
}

.load-more {
  margin-top: 20px;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
}

.loading {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 修改评论列表样式 */
.comment-list {
  height: 600px;  /* 固定高度 */
  overflow-y: auto;  /* 允许垂直滚动 */
  padding: 20px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* 添加滚动条样式 */
.comment-list::-webkit-scrollbar {
  width: 4px;
}

.comment-list::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 2px;
  opacity: 0.5;
}

.comment-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
  opacity: 0.8;
}

.comment-list::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
  color: var(--text-secondary);
}

.loading-state .loading {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 添加回复输入框的样式 */
.reply-input-area {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
}

.reply-input-area .input-wrapper {
  flex: 1;
}

.reply-input-area .input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* 添加展开/折叠按钮的样式 */
.expand-replies {
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.expand-replies:hover {
  color: var(--text-primary);
}
</style> 